import React, { Component } from 'react';
import "../styles/Search.scss"
import * as service from "../api/index"
import { SearchBar } from 'antd-mobile'



class Search extends Component {
    state = {
        sousuo: [],
    }
    async componentDidMount() {
        //轮播图
        var res = await service.search()
        console.log(res.data);
        this.setState({ sousuo: res.data },)

    }
    render() {
        return (
            <div className='search'>
                <div className='sousuo'>
                    <SearchBar placeholder='请输入内容' showCancelButton={() => true} />
                </div>
                <div className="remen">
                    <h2>热门搜索</h2>
                    <div className="xia">
                        {
                            this.state.sousuo.text?.map((item, index) => {
                                return (

                                    <span onClick={() => { this.props.history.push('/search_xiang') }} key={index}>{item.title}</span>

                                )
                            })
                        }
                    </div>
                </div>
                <div className="biye">
                    <h2>热门话题</h2>
                    <div className='top'>
                        <h4>#毕业旅行</h4>
                        <p>查看更多</p>
                    </div>
                    <div className="tu">
                        {
                            this.state.sousuo.biye?.map((item, index) => {
                                return (
                                    <div className="tu_one" key={index}>
                                        <img src={item.img} alt="" />

                                    </div>
                                )
                            })
                        }
                    </div>
                </div>
                <div className="xiangwang">
                    <div className='top'>
                        <h4>#向往的生活</h4>
                        <p>查看更多</p>
                    </div>
                    <div className="tu">
                        {
                            this.state.sousuo.xiangwang?.map((item, index) => {
                                return (
                                    <div className="tu_one" key={index}>
                                        <img src={item.img} alt="" />

                                    </div>
                                )
                            })
                        }
                    </div>
                </div>
            </div>
        );
    }
}

export default Search;